<template>
  <view class="dinner-detail">
    <!-- 菜品图片区 -->
    <image :src="dinnerInfo.imgUrl" class="dinner-img" mode="widthFix"></image>

    <!-- 核心信息区 -->
    <view class="detail-header">
      <text class="dinner-title">{{ dinnerInfo.title }}</text>

      <!-- 标签与评分 -->
      <view class="dinner-tags">
        <view class="tag" v-for="(tag, idx) in dinnerInfo.tags" :key="idx">{{ tag }}</view>
        <view class="rating">
          <text class="star-icon">★</text>
          <text class="score">{{ dinnerInfo.rating }}</text>
        </view>
      </view>

      <!-- 基础信息 -->
      <view class="detail-meta">
        <text class="meta-item">推荐来源: {{ dinnerInfo.source }}</text>
        <text class="meta-item">推荐日期: {{ dinnerInfo.publishDate }}</text>
      </view>
    </view>

    <!-- 详情内容区 -->
    <view class="detail-content">
      <text class="content-desc">{{ dinnerInfo.summary }}</text>

      <!-- 菜品特色 -->
      <view class="feature-card">
        <text class="feature-title">推荐亮点</text>
        <view class="feature-item" v-for="(item, idx) in dinnerInfo.featureList" :key="idx">
          <text class="feature-check">✓</text>
          <text class="feature-text">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮区 -->
    <view class="btn-group">
      <button @click="navigateBack" class="back-btn">返回列表</button>
      <button @click="collectDinner" class="collect-btn" :class="{ collected: isCollected }">
        {{ isCollected ? '已收藏' : '收藏菜品' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dinnerInfo: {},
      isCollected: false,
      dinnerList: [
        {
          id: 1,
          title: "【时令爆款】鲜蔬田园风味套餐，初夏清爽首选",
          summary: "美食圈近期热议的「轻食新标杆」！精选云南高山当季鲜蔬，拒绝过度调味，仅用少许海盐和橄榄油激发食材本味，脆嫩多汁的口感征服众多美食博主，成为春夏减脂期必吃清单TOP3。",
          source: "美食风尚周报",
          publishDate: "2025-05-01",
          tags: ["时令爆款", "低脂轻食", "博主推荐"],
          rating: 4.8,
          featureList: [
            "每日鲜采直达：云南高山蔬菜基地直供，24小时内从田间到餐桌",
            "健康无负担：低油低盐零添加，每100g仅含28大卡",
            "适配多场景：早餐佐粥、午餐饱腹、晚餐解腻，全家都爱食"
          ],
          imgUrl: "/static/dinner/dinner1.png"
        },
        {
          id: 2,
          title: "【非遗焕新】百年东坡肉创新套餐，老字号出圈之作",
          summary: "火上热搜的非遗美食！传承300年东坡肉烹制技艺，联合米其林大厨进行口味升级，选用浙江金华两头乌黑猪肉，搭配10年陈绍兴黄酒慢炖8小时，软糯不腻的口感让网友直呼「一口穿越千年」。",
          source: "饮食文化研究院",
          publishDate: "2025-05-02",
          tags: ["非遗美食", "老字号创新", "热搜爆款"],
          rating: 4.9,
          featureList: [
            "食材顶配：金华两头乌猪肉（国家级地理标志产品）+10年陈绍兴黄酒",
            "工艺传承：非遗传承人全程监制，慢炖8小时锁住肉汁",
            "场景适配：商务宴请、家庭聚餐、节日送礼，体面又美味"
          ],
          imgUrl: "/static/dinner/dinner2.png"
        },
        {
          id: 3,
          title: "【网红打卡】海南椰子鸡套餐，复刻热带海岛风味",
          summary: "小红书超10万篇笔记推荐的「治愈系美食」！精选海南文昌鸡+东郊椰林现摘椰子，纯椰汁汤底无任何添加剂，煮出的鸡肉鲜嫩弹滑，椰香浓郁，在家就能体验三亚海边的用餐氛围。",
          source: "文旅美食探索官",
          publishDate: "2025-05-03",
          tags: ["网红打卡", "海南特色", "治愈系美食"],
          rating: 4.7,
          featureList: [
            "产地直供：文昌鸡散养180天，椰子现摘现开保证新鲜",
            "营养滋补：纯椰汁汤底富含电解质，清热降火",
            "社交属性：颜值高易出片，打卡发圈获赞神器，朋友聚餐首选"
          ],
          imgUrl: "/static/dinner/dinner3.png"
        }
      ]
    };
  },
  onLoad(options) {
    // 获取当前菜品信息
    this.dinnerInfo = this.dinnerList.find(item => item.id === Number(options.id)) || this.dinnerList[0];
    // 检查收藏状态
    this.isCollected = uni.getStorageSync(`collect_${this.dinnerInfo.id}`) || false;
    // 保存浏览记录
    this.saveBrowseHistory();
  },
  methods: {
    // 返回列表页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    // 收藏/取消收藏
    collectDinner() {
      this.isCollected = !this.isCollected;
	  //  UniApp 原生支持的存储方式  uni.setStorageSync
      uni.setStorageSync(`collect_${this.dinnerInfo.id}`, this.isCollected);
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '取消收藏'
      });
    },
    // 保存浏览记录到本地存储
    saveBrowseHistory() {
      const historyItem = {
        goodsId: `dinner_${this.dinnerInfo.id}`,
        goodsName: this.dinnerInfo.title,
        goodsImg: this.dinnerInfo.imgUrl,
        goodsPrice: '推荐菜品',
        browseTime: Date.now(),
        storeId: 'dinner',
        storeName: this.dinnerInfo.source
      };

      let historyList = uni.getStorageSync('browseHistory') || [];
      historyList = historyList.filter(item => item.goodsId !== historyItem.goodsId);
      historyList.unshift(historyItem);

      if (historyList.length > 100) {
        historyList = historyList.slice(0, 100);
      }

      uni.setStorageSync('browseHistory', historyList);
    }
  }
};
</script>

<style scoped>
.dinner-detail {
  background-color: #fff;
  min-height: 100vh;
}

.dinner-img {
  width: 100%;
  height: auto;
  min-height: 300rpx;
}

.detail-header {
  padding: 30rpx;
}

.dinner-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  display: block;
  margin-bottom: 20rpx;
}

.dinner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 20rpx;
  align-items: center;
}

.tag {
  background-color: #fef5e7;
  color: #e67e22;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
}

.rating {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.star-icon {
  color: #ffc107;
  font-size: 28rpx;
  margin-right: 8rpx;
}

.score {
  font-size: 26rpx;
  color: #e67e22;
  font-weight: 500;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  font-size: 24rpx;
  color: #999;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.detail-content {
  padding: 0 30rpx 30rpx;
}

.content-desc {
  font-size: 28rpx;
  color: #555;
  line-height: 1.8;
  display: block;
  margin-bottom: 30rpx;
}

.feature-card {
  background-color: #faf6ed;
  padding: 25rpx;
  border-radius: 16rpx;
}

.feature-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #d35400;
  display: block;
  margin-bottom: 20rpx;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.feature-check {
  color: #d35400;
  font-size: 28rpx;
  margin-right: 12rpx;
  margin-top: 4rpx;
  flex-shrink: 0;
}

.feature-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  flex: 1;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.btn-group {
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
}

.back-btn {
  flex: 1;
  background-color: #f8f9fa;
  color: #333;
  border-radius: 12rpx;
  font-size: 30rpx;
  padding: 22rpx 0;
}

.collect-btn {
  flex: 1;
  background-color: #fef5e7;
  color: #e67e22;
  border-radius: 12rpx;
  font-size: 30rpx;
  padding: 22rpx 0;
}

.collect-btn.collected {
  background-color: #e67e22;
  color: #fff;
}
</style>